<template>
  <AppLayout>
    <div :class="styles['question-management']">
      <div class="page-header">
        <h1 class="page-title">题目管理</h1>
        <button class="add-question-btn" @click="showAddQuestionModal = true">
          <i class="btn-icon">➕</i>
          <span>添加题目</span>
        </button>
      </div>

      <div class="filters">
        <div class="search-box">
          <input v-model="searchQuery" type="text" placeholder="搜索题目..." class="search-input">
          <i class="search-icon">🔍</i>
        </div>
        <div class="filter-options">
          <select v-model="typeFilter" class="filter-select">
            <option value="">所有类型</option>
            <option value="single">单选题</option>
            <option value="multiple">多选题</option>
            <option value="essay">简答题</option>
          </select>
          <select v-model="difficultyFilter" class="filter-select">
            <option value="">所有难度</option>
            <option value="easy">简单</option>
            <option value="medium">中等</option>
            <option value="hard">困难</option>
          </select>
        </div>
      </div>

      <div class="questions-table">
        <table>
          <thead>
            <tr>
              <th>题目ID</th>
              <th>题目内容</th>
              <th>类型</th>
              <th>难度</th>
              <th>使用次数</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="question in filteredQuestions" :key="question.id">
              <td>{{ question.id }}</td>
              <td class="question-content">{{ question.content }}</td>
              <td>
                <span class="type-badge" :class="question.type">
                  {{ getTypeLabel(question.type) }}
                </span>
              </td>
              <td>
                <span class="difficulty-badge" :class="question.difficulty">
                  {{ getDifficultyLabel(question.difficulty) }}
                </span>
              </td>
              <td>{{ question.usageCount }}</td>
              <td>{{ formatDate(question.createdAt) }}</td>
              <td>
                <div class="action-buttons">
                  <button class="action-btn edit" @click="editQuestion(question)" title="编辑">
                    ✏️
                  </button>
                  <button class="action-btn view" @click="viewQuestion(question.id)" title="查看">
                    👁️
                  </button>
                  <button class="action-btn delete" @click="deleteQuestion(question.id)" title="删除">
                    🗑️
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/teacher/question-management.module.css'

const questions = ref([])
const searchQuery = ref('')
const typeFilter = ref('')
const difficultyFilter = ref('')
const showAddQuestionModal = ref(false)

const filteredQuestions = computed(() => {
  return questions.value.filter(question => {
    const matchesSearch = !searchQuery.value ||
      question.content.toLowerCase().includes(searchQuery.value.toLowerCase())

    const matchesType = !typeFilter.value || question.type === typeFilter.value
    const matchesDifficulty = !difficultyFilter.value || question.difficulty === difficultyFilter.value

    return matchesSearch && matchesType && matchesDifficulty
  })
})

const getTypeLabel = (type) => {
  const labels = {
    single: '单选题',
    multiple: '多选题',
    essay: '简答题'
  }
  return labels[type] || type
}

const getDifficultyLabel = (difficulty) => {
  const labels = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return labels[difficulty] || difficulty
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const editQuestion = (question) => {
  console.log('编辑题目:', question)
}

const viewQuestion = (questionId) => {
  console.log('查看题目:', questionId)
}

const deleteQuestion = (questionId) => {
  if (confirm('确定要删除这个题目吗？')) {
    console.log('删除题目:', questionId)
  }
}

onMounted(async () => {
  // 模拟数据
  questions.value = [
    {
      id: 1,
      content: 'Java中哪个关键字用于定义常量？',
      type: 'single',
      difficulty: 'easy',
      usageCount: 15,
      createdAt: '2024-01-10'
    },
    {
      id: 2,
      content: '以下哪些是Java的基本数据类型？',
      type: 'multiple',
      difficulty: 'medium',
      usageCount: 8,
      createdAt: '2024-01-12'
    }
  ]
})
</script>